<!DOCTYPE html>
<!--
Copyright 2012 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
  <head>
    <title></title>
    <script src="lib/loader.js"></script>
    <script src="lib/Component.js"></script>
    <style>
      div, g-A, g-B {
        display: block;
        border: 1px dotted red;
        margin: 8px;
        padding: 8px;
      }
    </style>
    <script>
      change = function() {
        Component.register("g-A", ["Base", "A"]);
        Component.register("g-B", ["Base", "B"]);
        Component.upgradeAll();
        //
        A = c$[0];
      }
    </script>
  </head>
  <body onload="change()">
      <g-A><span id="a1">Where am I?</span><span id="a2">Where do I go?</span></g-A>

      <!-- A collects #a2 into first CONTENT, leaving #a1 in POOL -->
      <!-- A.shadow (Base) collects #a1 into it's CONTENT -->
      <!-- first B should capture the #a2, second B should capture the #a1 -->
      <template id="A">[A->]<g-B><content select="#a2"></content></g-B><g-B><shadow></shadow></g-B>[<-A]</template>
      <!-- B collects #a2's into first CONTENT, leaving #a1's in POOL -->
      <!-- B.shadow collects #a1's into the second CONTENT -->
      <template id="B">[B->][<content select="#a2"></content>]<shadow></shadow>[<-B]</template>
      <!-- Base collects #a1's -->
      <template id="Base">[Base->]<content select="#a1"></content>[<-Base]</template>
      
      <hr/> 
      
      Expected output (also, see console):

      <div>[A->]
        <div>[B->][<span>Where do I go?</span>][Base->][<-Base][<-B]</div>
        <div>[B->][][Base->]Where am I?[<-Base][<-B]</div>
      [<-A]</div> 

</body>
</html>
